Angular Material হলো Angular অ্যাপ্লিকেশনের জন্য একটি UI লাইব্রেরি, যা বিভিন্ন ধরনের প্রি-ডিফাইনড UI কম্পোনেন্ট এবং স্টাইল সরবরাহ করে। এটি Google-এর Material Design গাইডলাইন অনুসরণ করে তৈরি করা হয়েছে, যা ব্যবহারকারীর অভিজ্ঞতাকে সহজ, সুন্দর এবং কার্যকরী করে তোলে। Angular Material ব্যবহার করে আপনি দ্রুত এবং সহজে রেসপনসিভ এবং মোডার্ন ইউজার ইন্টারফেস তৈরি করতে পারেন।

Angular Material এর বৈশিষ্ট্য

• উচ্চ মানের UI কম্পোনেন্ট: Angular Material বিভিন্ন প্রকার UI কম্পোনেন্ট সরবরাহ করে যেমন: টেবিল, বাটন, ইনপুট, স্লাইডার, টুলটিপ, সেপারেটর, ডায়লগ ইত্যাদি।
• রেসপনসিভ ডিজাইন: Material Design এর নির্দেশনা অনুসরণ করায়, Angular Material কম্পোনেন্টগুলি বিভিন্ন ডিভাইস এবং স্ক্রীন সাইজে ভালোভাবে কাজ করে।
• ইন্টারঅ্যাকটিভ এবং ডাইনামিক: Angular Material এর বিভিন্ন কম্পোনেন্টে ডাইনামিক ফিচার যেমন পপ-আপ ডায়ালগ, স্ন্যাকবার, টুলটিপ ইত্যাদি অন্তর্ভুক্ত রয়েছে।
• অ্যাক্সেসিবিলিটি (Accessibility): Material Design এর কম্পোনেন্টগুলি অ্যাক্সেসিবিলিটির দিকে মনোযোগ দিয়ে তৈরি করা হয়েছে, যা স্ক্রীন রিডার এবং কীবোর্ড নেভিগেশন সমর্থন করে।

Angular Material ইনস্টলেশন

Angular Material ব্যবহার করতে হলে প্রথমে আপনাকে এটি ইনস্টল করতে হবে। Angular CLI এর মাধ্যমে Angular Material ইনস্টল করা সহজ। নিচে স্টেপ-বাই-স্টেপ প্রক্রিয়া দেওয়া হলো:

1. Angular Material ইনস্টল করা

Angular প্রজেক্টে Angular Material ইনস্টল করতে:

ng add @angular/material

এটি ইনস্টল করার পর, Angular Material, Angular CDK (Component Dev Kit), এবং Angular Animations প্যাকেজ ইনস্টল হয়ে যাবে। ইনস্টলেশন প্রক্রিয়া চলাকালীন এটি আপনাকে থিম এবং অন্যান্য কিছু কনফিগারেশন পছন্দ করতে বলবে।

2. মডিউল ইম্পোর্ট করা

এখন আপনাকে প্রয়োজনীয় Angular Material কম্পোনেন্ট মডিউল গুলি আপনার অ্যাপ মডিউলে ইম্পোর্ট করতে হবে। উদাহরণস্বরূপ, ButtonModule এবং InputModule।

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatToolbarModule } from '@angular/material/toolbar';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MatButtonModule,
    MatInputModule,
    MatToolbarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, MatButtonModule, MatInputModule, এবং MatToolbarModule ইম্পোর্ট করা হয়েছে।

কিছু সাধারণ Angular Material কম্পোনেন্ট

1. Button (MatButton)

Angular Material এর বাটন কম্পোনেন্ট খুব সহজে ব্যবহার করা যায় এবং এটি বিভিন্ন ধরনের স্টাইল এবং অপশন প্রদান করে।

<button mat-button>Default Button</button>
<button mat-raised-button color="primary">Primary Button</button>
<button mat-flat-button color="accent">Accent Button</button>
<button mat-stroked-button>Stroked Button</button>

এখানে:

• mat-button সাধারণ বাটন
• mat-raised-button raised বাটন (যা হালকা শ্যাডো সহ)
• mat-flat-button flat বাটন (যা কোনো শ্যাডো ছাড়াই)
• mat-stroked-button বর্ডার সহ বাটন

2. Input Field (MatInput)

Material Design-এর ইনপুট ফিল্ড ব্যবহার করে সহজেই আধুনিক এবং ইন্টারঅ্যাকটিভ ইনপুট ফিল্ড তৈরি করা যায়।

<mat-form-field appearance="fill">
  <mat-label>Enter your name</mat-label>
  <input matInput placeholder="John Doe">
</mat-form-field>

এখানে:

• mat-form-field হলো Material Design এর ফর্ম ফিল্ডের কনটেইনার
• matInput ইনপুট এলিমেন্টটিকে Material স্টাইল দেয়

3. Toolbar (MatToolbar)

Material Design-এর টুলবার কম্পোনেন্ট ব্যবহার করে সুন্দর এবং রেসপনসিভ টুলবার তৈরি করা যায়।

<mat-toolbar color="primary">
  <span>My Application</span>
</mat-toolbar>

এখানে:

• mat-toolbar একটি টুলবারের জন্য কম্পোনেন্ট।
• color="primary" স্টাইলের প্রধান রঙ ব্যবহার করতে।

4. Dialog (MatDialog)

Angular Material এর Dialog কম্পোনেন্ট ব্যবহার করে পপ-আপ ডায়লগ তৈরি করা যায়।

import { MatDialog } from '@angular/material/dialog';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<button mat-button (click)="openDialog()">Open Dialog</button>'
})
export class AppComponent {
  constructor(public dialog: MatDialog) {}

  openDialog() {
    this.dialog.open(DialogContentExampleDialog);
  }
}

@Component({
  selector: 'dialog-content-example-dialog',
  template: '<h1 mat-dialog-title>Dialog Example</h1>'
})
export class DialogContentExampleDialog {}

এখানে:

• MatDialog ব্যবহার করে একটি ডায়লগ পপ-আপ তৈরি করা হয়েছে।
• open() ফাংশন ব্যবহার করে ডায়লগটি খোলা হচ্ছে।

5. SnackBar (MatSnackBar)

SnackBar কম্পোনেন্ট ব্যবহার করে আপনার অ্যাপ্লিকেশনে অস্থায়ী বার্তা বা নোটিফিকেশন প্রদর্শন করা যায়।

import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-root',
  template: '<button mat-button (click)="openSnackBar()">Show SnackBar</button>'
})
export class AppComponent {
  constructor(private _snackBar: MatSnackBar) {}

  openSnackBar() {
    this._snackBar.open('Message sent successfully!', 'Close', {
      duration: 2000,
    });
  }
}

এখানে:

• MatSnackBar ব্যবহার করে একটি ছোট মেসেজ শো করা হচ্ছে, যা 2 সেকেন্ডের জন্য প্রদর্শিত হবে।

উপসংহার

Angular Material একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব UI লাইব্রেরি, যা দ্রুত এবং সুন্দর ডিজাইন তৈরি করতে সহায়তা করে। এটি Angular অ্যাপ্লিকেশনগুলিতে Material Design-এর মূল উপাদানগুলিকে সহজভাবে বাস্তবায়ন করতে সাহায্য করে। Angular Material এর কম্পোনেন্টগুলি অত্যন্ত কাস্টমাইজযোগ্য, রেসপনসিভ এবং অ্যাক্সেসিবল, যা আপনাকে আপনার অ্যাপ্লিকেশনটিকে আরও আধুনিক এবং ইউজার-বান্ধব করতে সাহায্য করবে।

Angular Material হল একটি UI component লাইব্রেরি যা Angular অ্যাপ্লিকেশনগুলির জন্য ডেভেলপারদের আধুনিক, প্রতিক্রিয়া-ভিত্তিক এবং অদ্বিতীয় ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। এটি Google Material Design-এর প্রিন্সিপল অনুসরণ করে, যা একটি সুন্দর, ব্যবহারকারী বান্ধব এবং ইন্টুইটিভ ডিজাইন গাইডলাইন।

Angular Material Angular অ্যাপ্লিকেশনগুলির জন্য বিভিন্ন বিল্ট-ইন কম্পোনেন্ট প্রদান করে, যেমন বোতাম, টেবিল, ডায়ালগ, স্লাইডার, ডেটা পিকার, টুলটিপ, গ্রিড লিস্ট এবং আরো অনেক কিছু। এর মাধ্যমে ডেভেলপাররা সহজে সুনির্দিষ্ট কম্পোনেন্ট ব্যবহার করতে পারে এবং একটি পেশাদারী UI তৈরি করতে পারে যা ডেস্কটপ এবং মোবাইল উভয় প্ল্যাটফর্মে সঠিকভাবে কাজ করে।

Angular Material এর বৈশিষ্ট্য

Angular Material কিছু বিশেষ বৈশিষ্ট্য নিয়ে আসে, যা অ্যাপ্লিকেশন ডেভেলপমেন্টে অনেক সুবিধা প্রদান করে:

1. Material Design কম্পোনেন্ট: Angular Material বিভিন্ন প্রাক-বিল্ট কম্পোনেন্ট সরবরাহ করে যা Material Design গাইডলাইন অনুসরণ করে। এই কম্পোনেন্টগুলো হালকা, মোবাইল-ফ্রেন্ডলি এবং অত্যন্ত প্রতিক্রিয়া-ভিত্তিক (responsive)।
2. উন্নত UX: Angular Material কম্পোনেন্টগুলিতে উন্নত ইউজার এক্সপেরিয়েন্স (UX) থাকে, যেমন অ্যানিমেশন, ফর্ম ভ্যালিডেশন, এবং অটোমেটেড টুলটিপস, যা অ্যাপ্লিকেশনটির ব্যবহারকারীর জন্য আরও আকর্ষণীয় এবং ব্যবহারযোগ্য করে তোলে।
3. ডিভাইস-নিরপেক্ষ (Responsive): এই লাইব্রেরি মোবাইল ডিভাইস, ট্যাবলেট এবং ডেস্কটপের জন্য উপযুক্ত ইউজার ইন্টারফেস তৈরি করতে সাহায্য করে। এর মাধ্যমে আপনি সহজেই রেসপনসিভ ওয়েব ডিজাইন তৈরি করতে পারবেন।
4. কাস্টমাইজেশন: Angular Material ব্যবহারকারীদের কাস্টম থিম এবং স্টাইল কনফিগারেশনের মাধ্যমে UI কাস্টমাইজ করতে দেয়। আপনি সহজেই অ্যাপ্লিকেশনের লুক অ্যান্ড ফিল পরিবর্তন করতে পারেন।
5. ইন্টিগ্রেশন এবং ইন্টারঅ্যাকশন: Angular Material কম্পোনেন্টগুলির মধ্যে ইন্টিগ্রেশন খুবই সহজ। এগুলি সাধারণভাবে Angular Forms, RxJS এবং অন্যান্য Angular ফিচারের সাথে মসৃণভাবে কাজ করে।

Angular Material ব্যবহার শুরু করা

Angular Material ব্যবহার শুরু করতে কিছু সাধারণ স্টেপ অনুসরণ করতে হবে।

1. Angular Material ইনস্টলেশন

প্রথমে Angular CLI ব্যবহার করে Angular Material ইনস্টল করতে হবে। এই কমান্ডটি রান করুন:

ng add @angular/material

এটি Angular Material এবং এর ডিপেনডেন্সি ইনস্টল করবে এবং আপনার অ্যাপ্লিকেশন কনফিগারেশন ফাইলে প্রয়োজনীয় পরিবর্তন করবে।

2. প্রয়োজনীয় মডিউল ইমপোর্ট করা

Angular Material এর বিভিন্ন কম্পোনেন্ট ব্যবহার করতে হলে, প্রথমে আপনাকে সেগুলি ইমপোর্ট করতে হবে। উদাহরণস্বরূপ, যদি আপনি Material Button ব্যবহার করতে চান, তবে আপনাকে MatButtonModule মডিউলটি ইমপোর্ট করতে হবে।

import { MatButtonModule } from '@angular/material/button';

@NgModule({
  imports: [MatButtonModule],
})
export class AppModule {}

3. থিম কনফিগারেশন

Angular Material এর বিভিন্ন কম্পোনেন্টগুলো স্টাইল করার জন্য থিম কনফিগারেশন প্রয়োজন। এটি Angular Material এর নিজস্ব থিমিং সিস্টেম ব্যবহার করে। থিম সেট করার জন্য @angular/material এর থিম ফাইল ইমপোর্ট করতে হবে।

@import '~@angular/material/theming';
@include mat-core();

$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);

এখানে $primary, $accent, এবং $warn থিমের কালার স্কিম হিসেবে ব্যবহার করা হবে।

4. Angular Material কম্পোনেন্ট ব্যবহার

একবার Angular Material ইনস্টল ও কনফিগারেশন সম্পন্ন হলে, এখন আপনি বিভিন্ন কম্পোনেন্ট ব্যবহার করতে পারবেন। নিচে কিছু সাধারণ কম্পোনেন্টের উদাহরণ:

Material Button:

<button mat-button>Click me!</button>

Material Input Field:

<mat-form-field>
  <mat-label>Enter your name</mat-label>
  <input matInput>
</mat-form-field>

Material Card:

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    <p>This is the content of the card.</p>
  </mat-card-content>
</mat-card>

Angular Material কম্পোনেন্টের কিছু সাধারণ উদাহরণ

1. MatDialog (ডায়ালগ)

MatDialog কম্পোনেন্ট ব্যবহার করে আপনি একটি মডাল ডায়ালগ তৈরি করতে পারেন, যা ইউজারের সাথে যোগাযোগের জন্য ব্যবহৃত হয়।

import { MatDialog } from '@angular/material/dialog';

@Component({
  selector: 'app-dialog-example',
  templateUrl: 'dialog-example.html',
})
export class DialogExampleComponent {
  constructor(public dialog: MatDialog) {}

  openDialog(): void {
    this.dialog.open(DialogOverviewExampleDialog);
  }
}

2. MatTable (টেবিল)

MatTable কম্পোনেন্ট ব্যবহার করে আপনি সহজে একটি রেসপনসিভ টেবিল তৈরি করতে পারেন।

<table mat-table [dataSource]="dataSource">
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>
  
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

3. MatSnackBar (স্ন্যাকবার)

MatSnackBar একটি নোটিফিকেশন বার যা স্বল্প সময়ের জন্য স্ক্রীনে প্রদর্শিত হয়।

import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'app-snackbar',
  templateUrl: './snackbar.component.html',
})
export class SnackbarComponent {

  constructor(private snackBar: MatSnackBar) {}

  openSnackBar() {
    this.snackBar.open('Message successfully sent!', 'Close', {
      duration: 2000,
    });
  }
}

সারাংশ

Angular Material হল Angular অ্যাপ্লিকেশনে Material Design অনুসরণ করে আধুনিক, প্রতিক্রিয়া-ভিত্তিক ইউজার ইন্টারফেস তৈরির একটি শক্তিশালী লাইব্রেরি। এটি ডেভেলপারদের জন্য বিভিন্ন বিল্ট-ইন কম্পোনেন্ট প্রদান করে, যা মোবাইল এবং ডেস্কটপ উভয় প্ল্যাটফর্মে কার্যকরী। এর সহজ ইন্টিগ্রেশন, কাস্টমাইজেশন এবং রেসপনসিভ ডিজাইন ফিচার Angular অ্যাপ্লিকেশনকে আরও উন্নত এবং ব্যবহারকারী-বান্ধব করে তোলে।

Angular Material হলো Angular অ্যাপ্লিকেশনের জন্য একটি UI কম্পোনেন্ট লাইব্রেরি যা Google-এর Material Design principles অনুসরণ করে। এটি তৈরি করা হয়েছে আরও ইন্টারঅ্যাকটিভ এবং সুন্দর ইউজার ইন্টারফেস (UI) তৈরি করতে। Angular Material-এ বিভিন্ন প্রি-বিল্ট কম্পোনেন্ট যেমন Buttons, Input Fields, Dialogs, Menus, Navigation Bars, Cards ইত্যাদি রয়েছে, যা আপনার অ্যাপ্লিকেশনকে দ্রুত এবং সুন্দরভাবে ডেভেলপ করতে সহায়তা করে।

Angular Material ইনস্টলেশন

Angular Material ইনস্টল করার জন্য, আপনাকে প্রথমে Angular CLI ব্যবহার করে প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে।

1. Angular Material ইনস্টল করা

প্রথমে Angular CLI-এ আপনার প্রকল্পে Angular Material যোগ করতে হবে। এর জন্য নিচের কমান্ডটি রান করুন:

ng add @angular/material

এই কমান্ডটি Angular Material, Angular CDK (Component Dev Kit), এবং Angular Animations প্যাকেজগুলিকে ইনস্টল করবে এবং আপনার অ্যাপ্লিকেশনটির angular.json ফাইলে প্রয়োজনীয় কনফিগারেশন যুক্ত করবে।

2. থিম নির্বাচন করা

Angular Material ইনস্টল করার পর, একটি থিম নির্বাচন করতে হবে। Angular Material তিনটি বিল্ট-ইন থিম প্রদান করে:

• Indigo/Pink
• Purple/Green
• Deep Orange/Amber

এছাড়া, আপনি কাস্টম থিমও তৈরি করতে পারেন। ইনস্টলেশন প্রক্রিয়ায় একটি থিম নির্বাচন করতে বলা হবে। থিম নির্বাচনের জন্য আপনি নিচের কমান্ডটি ব্যবহার করতে পারেন:

ng add @angular/material --theme indigo-pink

3. অ্যাঙ্কুলার অ্যানিমেশনস ইনস্টল করা

Angular Material এর বেশিরভাগ কম্পোনেন্ট সুন্দর অ্যানিমেশন সহ কাজ করে, যা @angular/animations প্যাকেজের উপর নির্ভরশীল। এই প্যাকেজটি Angular Material ইনস্টলেশনের অংশ হিসেবে স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যাবে। যদি না হয়, তবে নিচের কমান্ডটি দিয়ে ইনস্টল করা যায়:

npm install @angular/animations

4. অ্যাপ্লিকেশনে Angular Material মডিউল অন্তর্ভুক্ত করা

Angular Material এর কম্পোনেন্ট ব্যবহার করতে হলে, সেগুলোর মডিউল আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে হবে। উদাহরণস্বরূপ, যদি আপনি Button এবং Card কম্পোনেন্ট ব্যবহার করতে চান, তবে আপনাকে নিচের মডিউলগুলো ইনক্লুড করতে হবে:

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    // Your components
  ],
  imports: [
    BrowserModule,
    MatButtonModule,   // Button module
    MatCardModule      // Card module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, MatButtonModule এবং MatCardModule দুটি মডিউল অ্যাপ্লিকেশনে অন্তর্ভুক্ত করা হয়েছে, যার ফলে Button এবং Card কম্পোনেন্টগুলি ব্যবহার করা যাবে।

Angular Material কম্পোনেন্ট ব্যবহার করা

Angular Material এর কম্পোনেন্টগুলো ব্যবহার করা অনেক সহজ এবং এগুলি অত্যন্ত কাস্টমাইজেবল। নিচে কিছু সাধারণ কম্পোনেন্টের উদাহরণ দেওয়া হলো:

1. Button কম্পোনেন্ট

<button mat-button>Click me!</button>

এখানে, mat-button ডিরেক্টিভটি বাটনটিকে Material Design স্টাইল অনুসারে স্টাইল করতে ব্যবহৃত হচ্ছে।

2. Card কম্পোনেন্ট

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    Content goes here...
  </mat-card-content>
</mat-card>

এখানে, mat-card কম্পোনেন্টটি একটি Material Design স্টাইলের কার্ড তৈরি করবে। এতে টাইটেল, সাবটাইটেল, এবং কনটেন্ট বিভাগ থাকবে।

3. Input কম্পোনেন্ট

<mat-form-field appearance="fill">
  <mat-label>Enter your name</mat-label>
  <input matInput placeholder="Ex. John Doe">
</mat-form-field>

এখানে, mat-form-field এবং matInput ব্যবহার করে একটি সুন্দর ফিল্ড তৈরি করা হয়েছে যেখানে Material Design ইনপুট স্টাইল ব্যবহার করা হয়েছে।

Angular Material মডিউল কনফিগারেশন

আপনি যখন বিভিন্ন Angular Material কম্পোনেন্ট ব্যবহার করতে চান, তখন আপনাকে সেগুলোর মডিউল আপনার অ্যাপ্লিকেশনে ইম্পোর্ট করতে হবে। Angular Material-এ বহু ধরনের কম্পোনেন্ট এবং মডিউল রয়েছে, এবং আপনি সেগুলি প্রয়োজন অনুযায়ী ব্যবহার করতে পারেন।

বেশ কিছু সাধারণ মডিউল:

• MatButtonModule – বাটন কম্পোনেন্টের জন্য।
• MatInputModule – ইনপুট ফিল্ডের জন্য।
• MatToolbarModule – টুলবার কম্পোনেন্টের জন্য।
• MatCardModule – কার্ড কম্পোনেন্টের জন্য।
• MatDialogModule – ডায়ালগ (পপ-আপ) উইন্ডোর জন্য।
• MatMenuModule – মেনু কম্পোনেন্টের জন্য।

সারাংশ

Angular Material ব্যবহার শুরু করতে হলে, প্রথমে Angular Material প্যাকেজটি ইনস্টল করতে হয়। এরপর প্রয়োজনীয় থিম এবং অ্যাঙ্কুলার অ্যানিমেশনস প্যাকেজ সেটআপ করতে হয়। একবার সেটআপ হয়ে গেলে, আপনি বিভিন্ন Material Design কম্পোনেন্ট ব্যবহার করে আপনার অ্যাপ্লিকেশন তৈরি করতে পারেন, যেমন বাটন, ইনপুট ফিল্ড, কার্ড ইত্যাদি।

এটি আপনার অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি এবং সবার কাছে দেখতে সুন্দর করে তুলবে।

Angular Material হল Angular অ্যাপ্লিকেশনের জন্য একটি জনপ্রিয় UI কম্পোনেন্ট লাইব্রেরি যা Google এর Material Design প্রিন্সিপাল অনুসরণ করে তৈরি। এটি ব্যবহারকারীদের বিভিন্ন ধরনের UI কম্পোনেন্ট সরবরাহ করে, যেমন Buttons, Icons, Cards, Input Fields, Dialogs ইত্যাদি, যা UI ডিজাইনকে দ্রুত এবং সহজে তৈরি করতে সাহায্য করে। এই কম্পোনেন্টগুলির মাধ্যমে অ্যাপ্লিকেশনের ইন্টারফেস আরও সুন্দর এবং কার্যকরী হয়।

এখানে আমরা কিছু জনপ্রিয় Angular Material কম্পোনেন্ট যেমন Buttons, Icons, এবং Cards সম্পর্কে আলোচনা করব এবং কিভাবে এগুলো ব্যবহার করা যায় তা দেখাব।

১. Material Button

Material Button একটি প্রধান কম্পোনেন্ট যা যেকোনো অ্যাপ্লিকেশনে বাটন তৈরি করতে ব্যবহৃত হয়। Angular Material এ বাটন তৈরি করার জন্য আপনাকে MatButtonModule ইমপোর্ট করতে হবে।

বাটন ইমপ্লিমেন্টেশন:

1. মডিউলে বাটন ইমপোর্ট করা:

   app.module.ts ফাইলে MatButtonModule ইমপোর্ট করুন:

   import { MatButtonModule } from '@angular/material/button';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [MatButtonModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. HTML-এ বাটন ব্যবহার করা:

   <button mat-button>Default Button</button>
   <button mat-raised-button color="primary">Primary Button</button>
   <button mat-stroked-button color="accent">Accent Button</button>
   <button mat-flat-button color="warn">Warn Button</button>
   

   এখানে:

   • mat-button: সাধারণ বাটন তৈরি করে।
   • mat-raised-button: উঁচু (raised) বাটন তৈরি করে।
   • mat-stroked-button: স্ট্রোকড বাটন তৈরি করে, যার সীমানা থাকে।
   • mat-flat-button: ফ্ল্যাট বাটন তৈরি করে।

২. Material Icon

Angular Material Icons হল একটি স্টাইলিশ এবং কার্যকরী উপায় আইকন ব্যবহার করার জন্য। আপনি এখানে Google Material Icons ব্যবহার করতে পারেন।

আইকন ইমপ্লিমেন্টেশন:

1. মডিউলে আইকন ইমপোর্ট করা:

   app.module.ts ফাইলে MatIconModule ইমপোর্ট করুন:

   import { MatIconModule } from '@angular/material/icon';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [MatIconModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. HTML-এ আইকন ব্যবহার করা:

   <mat-icon>home</mat-icon>
   <mat-icon>favorite</mat-icon>
   <mat-icon>search</mat-icon>
   

   এখানে, mat-icon ট্যাগের মধ্যে আপনি যে আইকনের নাম লিখবেন তা Google Material Icons থেকে স্বয়ংক্রিয়ভাবে রেন্ডার হবে। আপনার Angular অ্যাপ্লিকেশনকে প্রয়োজনীয় আইকনগুলো দেখতে Google Material Icons থেকে সিলেক্ট করতে পারেন।

৩. Material Card

Material Card হল একটি ফ্লেক্সিবল এবং সহজে কাস্টমাইজেবল উপাদান যা আপনি বিভিন্ন ধরণের কনটেন্ট প্রদর্শন করতে ব্যবহার করতে পারেন, যেমন টেক্সট, ছবি, বাটন ইত্যাদি।

কার্ড ইমপ্লিমেন্টেশন:

1. মডিউলে কার্ড ইমপোর্ট করা:

   app.module.ts ফাইলে MatCardModule ইমপোর্ট করুন:

   import { MatCardModule } from '@angular/material/card';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [MatCardModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. HTML-এ কার্ড ব্যবহার করা:

   <mat-card>
     <mat-card-header>
       <mat-card-title>Card Title</mat-card-title>
       <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
     </mat-card-header>
     <img mat-card-image src="https://via.placeholder.com/150" alt="Card image">
     <mat-card-content>
       <p>This is an example of an Angular Material Card component.</p>
     </mat-card-content>
     <mat-card-actions>
       <button mat-button>Learn More</button>
     </mat-card-actions>
   </mat-card>
   

   এখানে:

   • mat-card: মূল কার্ড ট্যাগ।
   • mat-card-header: কার্ডের শিরোনাম এবং সাবটাইটেল।
   • mat-card-title এবং mat-card-subtitle: কার্ডের শিরোনাম এবং সাবটাইটেল।
   • mat-card-image: কার্ডে চিত্র যোগ করার জন্য।
   • mat-card-content: কার্ডের কন্টেন্ট।
   • mat-card-actions: কার্ডের অ্যাকশন বাটনগুলোর জন্য।

৪. Material Toolbar

Material Toolbar একটি পৃষ্ঠার টপ অংশে থাকা ন্যাভিগেশন বা অ্যাপ্লিকেশন হেডার তৈরি করতে ব্যবহৃত হয়। এটি টুলবারের মধ্যে বিভিন্ন উপাদান যেমন লোগো, ন্যাভিগেশন বাটন ইত্যাদি ধারণ করে।

টুলবার ইমপ্লিমেন্টেশন:

1. মডিউলে টুলবার ইমপোর্ট করা:

   app.module.ts ফাইলে MatToolbarModule ইমপোর্ট করুন:

   import { MatToolbarModule } from '@angular/material/toolbar';
   
   @NgModule({
     declarations: [AppComponent],
     imports: [MatToolbarModule],
     bootstrap: [AppComponent]
   })
   export class AppModule {}
   

2. HTML-এ টুলবার ব্যবহার করা:

   <mat-toolbar color="primary">
     <span>My Application</span>
   </mat-toolbar>
   

   এখানে:

   • mat-toolbar: টুলবার তৈরি করার জন্য ব্যবহৃত কম্পোনেন্ট।
   • color="primary": টুলবারের রঙ প্রাথমিক রঙ হিসেবে সেট করা হচ্ছে।

সারসংক্ষেপ

Angular Material আপনাকে দ্রুত এবং সুন্দরভাবে ইউজার ইন্টারফেস ডিজাইন করার জন্য অনেক ধরনের প্রস্তুত কম্পোনেন্ট সরবরাহ করে। এখানে আমরা Buttons, Icons, Cards এবং Toolbars এর উদাহরণ দেখলাম, তবে Angular Material আরও অনেক শক্তিশালী কম্পোনেন্ট যেমন Dialogs, Snackbars, Tables, Forms ইত্যাদি সরবরাহ করে। আপনি Angular Material এর অফিসিয়াল ডকুমেন্টেশন থেকে আরও কম্পোনেন্ট এবং তাদের কাস্টমাইজেশন সম্পর্কে বিস্তারিত জানতে পারেন।

Angular Material-এ Data Table একটি অত্যন্ত জনপ্রিয় কম্পোনেন্ট যা বড় আকারের ডেটা ডিসপ্লে করার জন্য ব্যবহৃত হয়। এটি খুবই কাস্টমাইজেবল এবং ব্যবহারযোগ্য, যেখানে pagination, sorting, filtering, এবং responsive design সহ আরও অনেক সুবিধা পাওয়া যায়। Angular Material Data Table ব্যবহার করে আপনি খুব সহজেই আপনার অ্যাপ্লিকেশনে একটি ডাইনামিক এবং ফিচার-প্যাকড টেবিল তৈরি করতে পারবেন।

Angular Material Data Table সেটআপ

Angular Material Data Table ব্যবহারের জন্য, প্রথমে আপনাকে Angular Material ইনস্টল করতে হবে এবং প্রয়োজনীয় মডিউলগুলো ইম্পোর্ট করতে হবে।

1. Angular Material ইনস্টল করা

Angular CLI ব্যবহার করে Angular Material ইনস্টল করতে:

ng add @angular/material

এটি আপনাকে প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করার সাথে সাথে একটি থিমও নির্বাচন করতে বলবে।

2. প্রয়োজনীয় মডিউল ইম্পোর্ট করা

Angular Material Data Table ব্যবহারের জন্য, আপনাকে MatTableModule, MatPaginatorModule, MatSortModule ইত্যাদি মডিউলগুলো ইম্পোর্ট করতে হবে।

import { MatTableModule } from '@angular/material/table';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatSortModule } from '@angular/material/sort';
import { MatInputModule } from '@angular/material/input'; // Filter functionality জন্য

@NgModule({
  imports: [
    MatTableModule,
    MatPaginatorModule,
    MatSortModule,
    MatInputModule
  ]
})
export class AppModule { }

Data Table তৈরি করা

এখন Angular Material Data Table ব্যবহার করার জন্য আপনাকে একটি টেবিল তৈরি করতে হবে এবং ডেটা সোর্সের সাথে এটি যুক্ত করতে হবে।

1. টেবিল কম্পোনেন্ট তৈরি করা

ধরা যাক, আপনি একটি UsersComponent তৈরি করছেন যেখানে ব্যবহারকারীদের একটি লিস্ট টেবিল আকারে দেখানো হবে।

import { Component, OnInit, ViewChild } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

export interface User {
  id: number;
  name: string;
  email: string;
}

const USERS_DATA: User[] = [
  {id: 1, name: 'John Doe', email: 'john@example.com'},
  {id: 2, name: 'Jane Smith', email: 'jane@example.com'},
  {id: 3, name: 'Mary Johnson', email: 'mary@example.com'},
  // আরও ডেটা
];

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.css']
})
export class UsersComponent implements OnInit {
  displayedColumns: string[] = ['id', 'name', 'email'];
  dataSource = new MatTableDataSource(USERS_DATA);

  @ViewChild(MatPaginator) paginator: MatPaginator | undefined;
  @ViewChild(MatSort) sort: MatSort | undefined;

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }
}

2. টেম্পলেটে Data Table সেটআপ

এখন, users.component.html ফাইলে টেবিলটি তৈরি করুন এবং Angular Material এর কম্পোনেন্টগুলো ব্যবহার করুন:

<div class="mat-elevation-z8">
  <mat-form-field>
    <mat-label>Filter</mat-label>
    <input matInput (keyup)="applyFilter($event)" placeholder="Filter">
  </mat-form-field>

  <table mat-table [dataSource]="dataSource" matSort>

    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
      <td mat-cell *matCellDef="let element"> {{element.id}} </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let element"> {{element.name}} </td>
    </ng-container>

    <!-- Email Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>

  <mat-paginator [pageSize]="5" [pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

এখানে:

• matTable ডিরেক্টিভের মাধ্যমে টেবিলটি তৈরি করা হয়েছে।
• matColumnDef ব্যবহার করে প্রতিটি কলামের জন্য ডেফিনিশন তৈরি করা হয়েছে (যেমন, ID, Name, Email)।
• matSort সোর্টিং ফিচার যোগ করা হয়েছে, যাতে ব্যবহারকারী কলাম হেডারের উপর ক্লিক করে সorting করতে পারে।
• mat-paginator দিয়ে পেজিনেশন যোগ করা হয়েছে যাতে ব্যবহারকারী ডেটা পেজ বাই পেজ দেখতে পারে।

আরও কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য

1. সোর্টিং (Sorting)

আপনি যেকোনো কলামে সোর্টিং করতে পারেন। Angular Material mat-sort-header ডিরেক্টিভের মাধ্যমে সোর্টিং সক্ষম করা হয়েছে।

2. পেজিনেশন (Pagination)

পেজিনেশন দ্বারা আপনি টেবিলের ডেটাকে বিভিন্ন পেজে ভাগ করে ব্যবহারকারীর সুবিধার্থে দেখাতে পারেন। mat-paginator এর মাধ্যমে আপনি পেজ সাইজ এবং পেজ নেভিগেশন কন্ট্রোল করতে পারেন।

3. ফিল্টারিং (Filtering)

Filter ফিচার ব্যবহার করে ব্যবহারকারী টেবিলের ডেটার মধ্যে কিওয়ার্ডের মাধ্যমে অনুসন্ধান করতে পারে। applyFilter মেথডে ফিল্টারিং লজিক যুক্ত করা হয়।

সারাংশ

Angular Material Data Table একটি খুবই শক্তিশালী টুল যা Angular অ্যাপ্লিকেশনে ডাইনামিক এবং ইন্টারঅ্যাকটিভ টেবিল তৈরি করতে ব্যবহৃত হয়। এটি sorting, pagination, এবং filtering ফিচারসমূহ সরবরাহ করে যা ইউজার ইন্টারফেসকে আরও উন্নত এবং ব্যবহারযোগ্য করে তোলে। Angular Material এর সাহায্যে Data Table তৈরি করা অনেক সহজ এবং কাস্টমাইজ করা যায়।

Angular Material হল Angular অ্যাপ্লিকেশনের জন্য একটি UI কম্পোনেন্ট লাইব্রেরি যা আপনাকে প্রস্তুত তৈরি কম্পোনেন্টগুলোর মাধ্যমে একটি সুন্দর এবং ব্যবহারকারী-বান্ধব ইন্টারফেস তৈরি করতে সাহায্য করে। Angular Material থিমিং আপনাকে একটি কাস্টম স্টাইল এবং লুক অ্যান্ড ফিল (Look and Feel) প্রদান করতে সাহায্য করে।

Angular Material এর থিমিং সিস্টেমটি অত্যন্ত ফ্লেক্সিবল এবং আপনি বিভিন্ন রঙের স্কিম ব্যবহার করতে পারেন, যা সহজেই কাস্টমাইজ করা যায়। Angular Material থিমগুলি primary, accent, এবং warn রঙের ভিত্তিতে কাজ করে, যা একটি অ্যাপ্লিকেশনকে একটি নির্দিষ্ট রঙের স্কিম অনুযায়ী সাজানোর সুবিধা দেয়।

Angular Material থিমিংয়ের উপাদান

Angular Material থিমিং সিস্টেমের কিছু মূল উপাদান হল:

1. Primary, Accent, এবং Warn রঙ:
   • Primary: প্রধান রঙ যা অ্যাপ্লিকেশনের স্নিগ্ধ এবং প্রাথমিক স্টাইলিংয়ের জন্য ব্যবহৃত হয়।
   • Accent: secondary বা highlight রঙ যা বিভিন্ন UI এলিমেন্টের জন্য ব্যবহৃত হয়, যেমন বাটন বা লিংক।
   • Warn: সতর্কতা বা ইরর রঙ, সাধারণত সতর্কতা বার্তা বা ইরর স্টেটসের জন্য ব্যবহৃত হয়।
2. Theme (মূল থিম) এবং Dark Theme (ডার্ক থিম):
   • আপনি আপনার অ্যাপ্লিকেশনের জন্য Light এবং Dark থিম কনফিগার করতে পারেন।

Angular Material থিম কাস্টমাইজ করা

Angular Material-এ থিম কাস্টমাইজ করার জন্য SCSS (Sass) ব্যবহার করতে হয়। এই কাজটি styles.scss বা আপনার থিম ফাইলের মাধ্যমে করা যেতে পারে।

1. ডিফল্ট Material থিম ব্যবহার

Angular Material ডিফল্টভাবে একটি থিম তৈরি করে, তবে আপনি এটি পরিবর্তন করতে পারেন। প্রথমে, আপনার অ্যাপ্লিকেশনে Angular Material ইনস্টল করতে হবে।

ng add @angular/material

এটি একটি ডিফল্ট থিম এবং অন্যান্য কম্পোনেন্ট লাইব্রেরি ইনস্টল করবে।

styles.scss ফাইলে ডিফল্ট থিম যোগ করা যাবে:

@import '~@angular/material/theming';
@include mat-core();

// Defining your custom theme
$my-primary: mat-palette($mat-indigo);
$my-accent: mat-palette($mat-pink, 500);
$my-warn: mat-palette($mat-red);

$my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

// Applying the theme
@include angular-material-theme($my-theme);

এখানে:

• mat-palette() ফাংশনটি রঙের প্যালেট তৈরি করতে ব্যবহৃত হয়।
• mat-light-theme() অথবা mat-dark-theme() ব্যবহার করে আপনি লাইট অথবা ডার্ক থিম নির্বাচন করতে পারেন।
• angular-material-theme() হল থিমটি অ্যাপ্লিকেশনে প্রয়োগ করার জন্য।

2. Dark Theme কাস্টমাইজ করা

Angular Material এ ডার্ক থিম প্রয়োগ করতে, আপনি সহজেই mat-dark-theme ব্যবহার করতে পারেন।

$my-primary: mat-palette($mat-blue);
$my-accent: mat-palette($mat-orange);
$my-warn: mat-palette($mat-deep-orange);

$my-dark-theme: mat-dark-theme($my-primary, $my-accent, $my-warn);

@include angular-material-theme($my-dark-theme);

এখানে, mat-dark-theme() ব্যবহার করে আপনি ডার্ক থিম তৈরি করেছেন। এই থিমটি অ্যাপ্লিকেশনের সকল Material কম্পোনেন্টে ডার্ক মোড প্রয়োগ করবে।

3. থিম পরিবর্তন করার জন্য কাস্টম রঙের প্যালেট

আপনি যদি সম্পূর্ণ কাস্টম রঙ ব্যবহার করতে চান, তবে mat-palette() এর মধ্যে কাস্টম রঙের কোড ব্যবহার করতে পারেন। উদাহরণস্বরূপ:

$my-primary: mat-palette($mat-teal, 600, 300, 900);
$my-accent: mat-palette($mat-orange, 500);
$my-warn: mat-palette($mat-red);

$my-custom-theme: mat-light-theme($my-primary, $my-accent, $my-warn);

@include angular-material-theme($my-custom-theme);

এখানে mat-palette() এর মধ্যে রঙের কোডের বিভিন্ন শেড (যেমন 600, 300, 900) ব্যবহার করা হয়েছে।

4. Theme Switching (থিম পরিবর্তন)

আপনি যদি অ্যাপ্লিকেশনের মধ্যে লাইট এবং ডার্ক থিমের পরিবর্তন করতে চান, তবে আপনি JavaScript বা TypeScript ব্যবহার করে থিম সুইচিং করতে পারেন। উদাহরণস্বরূপ:

TypeScript ফাইলে থিম পরিবর্তন কোড:

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {

  constructor(private sanitizer: DomSanitizer) { }

  switchTheme(isDark: boolean) {
    const themeLink = document.getElementById('theme-link') as HTMLLinkElement;
    if (isDark) {
      themeLink.href = 'assets/themes/dark-theme.css';
    } else {
      themeLink.href = 'assets/themes/light-theme.css';
    }
  }
}

এখানে, আপনি switchTheme() ফাংশন ব্যবহার করে থিম পরিবর্তন করছেন, যেখানে একটি CSS ফাইলের রেফারেন্স দিয়ে আপনি অ্যাপ্লিকেশনটি ডার্ক থিম বা লাইট থিমে সুইচ করতে পারবেন।

সারাংশ

Angular Material থিমিং সিস্টেম একটি শক্তিশালী টুল যা আপনার অ্যাপ্লিকেশনকে সুন্দর এবং ব্যবহারকারী-বান্ধব করে তোলে। আপনি Angular Material-এর থিম কাস্টমাইজ করে একটি ইউনিফর্ম UI তৈরি করতে পারেন এবং ডার্ক অথবা লাইট থিমে পরিবর্তন করতে পারেন। থিমিংয়ের মাধ্যমে অ্যাপ্লিকেশনের রঙ স্কিম সহজেই কাস্টমাইজ করা সম্ভব, যা আপনার ব্র্যান্ড বা অ্যাপ্লিকেশনের স্টাইল অনুযায়ী মানানসই হয়।